<template>
    <view>
        <u-tabbar
                :value="current"
                @change="change"
                :fixed="true"
                :placeholder="true"
                :safeAreaInsetBottom="true"
        >
            <u-tabbar-item v-for="(item,index) in lists"
                           :text="item.title" :icon="item.icon" :key="index"></u-tabbar-item>
        </u-tabbar>

        <view class="u-cell-box" v-if='flangs===0'>
            <view class="box-top" @click="cancel"></view>
            <view class="box-bottom" v-if="counet===1">
                <view class="_array" @click="tianj"><image src="/static/bwzf.png" mode=""></image>添加房源</view>
                <view class="_array" @click="register"><image src="/static/hz.png" mode=""></image>房东登记</view>
                <view class="_array" @click="Administration"><image src="/static/jpgy.png" mode=""></image>房东管理</view>
            </view>
            <!-- 添加房源 -->
            <view class="box-bottom" v-else>
                <view class="_array" @click="apartment" ><image src="/static/bwzf.png" mode=""></image>精品公寓</view>
                <view class="_array" @click="join"><image src="/static/hz.png" mode=""></image>分散式合租</view>
                <view class="_array" @click="whole"><image src="/static/jpgy.png" mode=""></image>分散式整租</view>
            </view>
        </view>
        <view class="_bottomyd" v-show='flangs===0'>
            <image @click="cancel" src="/static/icon/tc.png" mode=""></image>
        </view>
    </view>
</template>

<script>
    export default {
        name: "landlord-bottom-navigation-bar",
        data() {
            return {
                current: uni.getStorageSync('landlord_tab_bar') || 0,
                lists: [{
                        title: '首页',
                        icon: 'home',
                        url: '/pages/landlord/index/index'
                    }, {
                        title: '房源库',
                        icon: 'photo',
                        url: '/pages/landlord/library/index'
                    },{
                        title: '',
                        icon: 'plus-circle',
                    }, {
                        title: '消息',
                        icon: 'play-right',
                        url: '/pages/landlord/message/index'
                    }, {
                        title: '我的',
                        icon: 'account',
                        url: '/pages/landlord/my/index'
                    }],
                counet:1,
                flangs:1,
            };
        },
        methods: {
            change(index){
                if (parseInt(index) === 2) {
                    console.log(index);
                    this.imgjh();
                }else {
                    uni.setStorageSync('landlord_tab_bar', index);
                    // this.current = uni.getStorageSync('user_tab_bar');
                    let url = this.lists[index].url;
                    // uni.switchTab({url: url});
                    // wx.switchTab({url: url});
                    // uni.reLaunch({url: url});
                    uni.redirectTo({url: url});
                }
            },
            cancel(){
                this.flangs=1
                this.counet=1
            },
            imgjh(){
                this.flangs=0
                this.counet=1
            },
            tianj(){
                this.counet=0
            },
            Administration(){
                uni.navigateTo({url: '/pages/landlord/plus/manage'});
            },
            register(){
                uni.navigateTo({url: '/pages/landlord/plus/register'});
            },
            apartment(){
                uni.navigateTo({url: '/pages/landlord/plus/apartment'});
            },
            join(){
                uni.navigateTo({url: '/pages/landlord/plus/join'});
            },
            whole(){
                uni.navigateTo({url: '/pages/landlord/plus/whole'});
            }
        }
    }
</script>

<style lang="scss" scoped>

    ._bottomyd{
        width: 100%;
        height: 15%;
        position: fixed;
        z-index: 100000;
        bottom: 0;
        left: 0;
        background-color: white;
        text-align: center;
        image{
            width: 40rpx;
            height: 40rpx;
            margin-top: 50rpx;
        }
    }

    .u-cell-box{
        position: fixed;
        // top: 130rpx;
        top: 0;
        left: 0;
        width: 100%;
        height: 85%;
        background-color: #f4f4f4;
        // background-color: gray;
        opacity: 0.85;
        z-index: 10000000;
        .box-bottom{
            width: 100%;
            height: 25%;
            // background-color: yellow;
            display: flex;
            justify-content: space-around;
            position: relative;
            ._array{
                margin-top: 30rpx;
                width: 220rpx;
                height: 220rpx;
                opacity: 1;
                // background-color: green;
                text-align: center;
                image{
                    width: 140rpx;
                    height: 140rpx;
                    border-radius: 50%;
                    display: block;
                    margin: 0 auto;
                    margin-bottom: 10rpx;
                }
            }
        }
        .box-top{
            width: 100%;
            height: 75%;
            // background-color: gray;
            opacity: 0.6;
        }
    }
</style>